<template>
	<view class="content">
		<div class="list">
			<u-input v-model="value" type="textarea" :border="border" height="200" placeholder="填写退款原因" />
			<!-- <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :multiple="true"
				:maxCount="3" width="106rpx" height="106rpx" :deletable="true" :previewImage="true" :custom-btn="true">
				<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
					<img src="../../static/img/pic.png" mode="" style="width: 106rpx;height: 106rpx;"></img>
				</view>
			</u-upload> -->
		</div>
		<div class="list1">
			<div class="text">联系方式(选填)</div>
			<u-input v-model="orderData.contactPhone" type="text" placeholder="请输入您的手机号码" class="input" />
		</div>
		<img src="../../static/img/icon1.png" alt="" class="refund" @click="refundMsg">

	</view>

</template>

<script>
	export default {
		data() {
			return {
				value: '',
				borser:false,
				value1: '',
				// 上传图片
				fileList1: [],
				orderData: {},
				flag: false,

			}
		},
		onLoad(params) {
			console.log(params)
			this.getOrder(params.id)
		},
		methods: {
			// 获取订单信息
			getOrder(id) {
				this.$http({
					url: this.$myApi.orderList + '?id=' + id,
					method:'GET',
					hideLoading:true,
					data:{},
					success:res=>{
						console.log(res)
						this.orderData = res.rows[0];
						this.orderData.orderAmount = parseFloat(this.orderData.orderAmount / 100 ).toFixed(2)
					
					},
					fail:err=>{
						console.log(err);
					},complete:e=>{
						this.status = 'nomore'
					}
				})
			},
			// 退款随机数
			generateRefundNumber() {   
				 const datePrefix = '';
			  // 生成12位随机数  
			  const randomSuffix = Math.floor(100000000000 + Math.random() * 900000000000).toString(); // 生成12位随机数，范围从100000000000到999999999999  
			  // 拼接前缀和后缀，形成退款流水号  
			  const refundNumber = ` ${randomSuffix}`;  
			  return refundNumber;  
			},
			// 函数节流
			throttle(func, delay) {  
			  let lastCall = 0;  
			  return function(...args) {  
			    const now = new Date().getTime();  
			    if (now - lastCall < delay) {  
			      return;  
			    }  
			    lastCall = now;  
			    return func.apply(this, args);  
			  }  
			},
			// 申请退款
			// refundMsg
			refundMsg() {
				if(this.flag) {
					console.log('重复点击了');
					return;
				}
				this.flag = true;
				let data = {
					ordern: this.orderData.number, // 票付通订单号
					num: 0,  // 现在全退？
					ordertel: this.orderData.contactPhone, //游客手机号，
					m: this.generateRefundNumber(), //退款流水号
					reason: this.value, // 退款原因
					
					number:  this.orderData.id
				}
				this.$httpFormData.post(
					this.$myApi.cancelOrder,
					data,
					{
						header: {
							'Content-Type': 'application/x-www-form-urlencoded;charset=utf8',
							"Authorization": uni.getStorageSync('token') || 1,
							Clientid: uni.getStorageSync('clientID') || 1
						},
					}
				)
				.then(res => {
					console.log('取消订单的信息', res);
					if(res.data.code == 200) {
						// 取消订单成功  需要走退款接口
						// refundOrder
						this.$http({
							url:this.$myApi.refundOrder + '?id=' + this.orderData.id,
							method:'GET',
							hideLoading:true,
							data:{},
							success:res=>{
								console.log(res, '退款信息')
								if(res.code == 200) {
									uni.showToast({
										title: '退款成功，即将返回个人中心',
										duration: 2000,
										icon: 'none'
									});
									let _this = this;
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/newMy/index'
										})
										_this.flag = false;
									}, 2000)
								} else {
									uni.showToast({
										title: res.message || res.msg,
										duration: 2000,
										icon: 'none'
									});
								}
							},
							fail:err=>{
								console.log(err);
							},complete:e=>{
								this.status = 'nomore';
							}
						})
					} else {
						
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
						let _this = this;
						setTimeout(() => {
							_this.flag = false;
						}, 2000)
					}
				})
				.catch(err=>{
					uni.showToast({
						title: err.msg,
						duration: 2000,
						icon: 'none'
					});
				})
			},
			
			// refundMsg() {
			// 	console.log(this.orderData)
			// 	let data = {
			// 		ordern: this.orderData.number, // 票付通订单号
			// 		num: 0,
			// 		ordertel: this.value1, //游客手机号，
			// 		m: this.generateRefundNumber(), //退款流水号
			// 		reason: this.value, // 退款原因
			// 	}
			// 	this.$httpFormData.post(
			// 		this.$myApi.cancelOrder,
			// 		data,
			// 		{
			// 			header: {
			// 				'Content-Type': 'application/x-www-form-urlencoded;charset=utf8',
			// 				"Authorization": uni.getStorageSync('token') || 1,
			// 				Clientid: uni.getStorageSync('clientID') || 1
			// 			},
			// 		}
			// 	)
			// 	.then(res => {
					
			// 		console.log('取消订单的信息', res);
			// 	})
			// 	.catch(err=>{
			// 		uni.showToast({
			// 			title: err.msg,
			// 			duration: 2000,
			// 			icon: 'none'
			// 		});
			// 	})
			// },
			//删除图片
			deletePic(e) {
				console.log(e);
				this[`fileList${e.name}`].splice(e.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				console.log(event)
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			// 上传图片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						//url: this.$common.domain+'/api/common/upload', // 仅为示例，非真实的接口地址
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
		}


	

	}
</script>
<style>
	page {
		background-color: #F6F9FF;
	}
</style>
<style lang="scss" scoped>
	.content {
		width: 100%;

		.list {
			width: 690rpx;
			height: 369rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			opacity: 1;
			margin-left: 30rpx;
			margin-top: 20rpx;
			padding-left: 18rpx;
			padding-right: 24rpx;

		}

		.list1 {
			width: 690rpx;
			// height: 145rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			opacity: 1;
			margin-left: 30rpx;
			margin-top: 20rpx;
			padding-left: 30rpx;

			.text {
				padding-top: 20rpx;

			}
		}

		.refund {
			width: 576rpx;
			height: 82rpx;
			margin-top: 450rpx;
			margin-left: 87rpx;
		}

	}
</style>
